﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava:  Hello World!</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href='../css/demos.css' rel='stylesheet' type='text/css'>
    <script src="../scripts/lava.js" type="text/javascript"></script>
    <script type="text/javascript">
        var Controller = Lava.Object({
            first: 'John',
            last: 'Doe',
            fullName: Lava.Computed(function () {
                return 'Hello, ' + this.first + ' ' + this.last + '!';
            })
        });

    </script>
</head>
<body>
    <div class="content">
        <h1>Hello World Demo</h1>
        The Hello World demo represents the most basic implementation of Lava.  It shows a very basic 
        example of data binding to a controller.  The first textbox is bound to the Controller.first 
        property and the second textbox is bound to the Controller.last property.  These bindings 
        are two-way meaning that, changes to the property will propagate to the UI and changes to the UI 
        will propagate to the properties.  Most UI controls that accept input are bound in both directions
        by default.  The heading just under the textboxes is bound to the fullName computed property 
        of the Controller.  This means that any changes to the two textboxes will update the full name 
        also.
    </div>
    <div class="centered-content" style="margin-top:50px">
        <h1>Hello World!</h1>
        <input type="text" data-bind="{value: Controller.first}" /><br>
        <input type="text" data-bind="{value: Controller.last}" /><br>
        <h2 data-bind="{text: Controller.fullName}"></h2>
    </div>
</body>
</html>
